<!-- 底部导航 -->
 <!-- new URL('@/assets/daib.png',import.meta.url).href, -->
 <script setup>
 import { useUser } from '@/stores/index';
 import{computed}from 'vue'
 import {ref} from 'vue';
 let prop = defineProps(['time']);
 let emit = defineEmits(['update:time']);
 let store = useUser();//创建一个useUser存储器
 function fn(path){
     emit('update:time',path);
     store.setPath(path);
 }
 let list = ref([
     {icon:new URL('@/assets/game.png',import.meta.url).href,title:'游戏',path:'/work'},
     {icon:new URL('@/assets/word.png',import.meta.url).href,title:'世界',path:'/word'},
     {icon:new URL('@/assets/shop.png',import.meta.url).href,title:'商店',path:'/shop'},
     {icon:new URL('@/assets/lick.png',import.meta.url).href,title:'收藏',path:'/lick'},
 ]);
 let ys = computed(()=>{
     return {backgroundColor:'#fff',color:'red'}
 })
 </script>
 <template>
     <ul class="bar">
         <li @click="fn(x.path)" v-for="(x,index) in list " :key="index" :style="x.path==store.path?ys:''">
             <img :src="x.icon"/>
             <span>{{x.title}}</span>
         </li>
     </ul>
 </template>
 <style scoped>
 *{
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }
 .bar{
     width: 100%;
     display: flex;
     justify-content: space-between;
 }
 .bar>li{
     display: flex;
     flex-direction: column;
     align-items: center;
     flex: 1;
     cursor: pointer;
 }
 .bar>li img{
     width: 25px;
     height: 25px;
 }
 </style>